import React, { useState } from 'react'
import '../static/less/day.less'
import { dayUpdate } from '../api/index'
import { Link } from 'react-router-dom'
export default function Day() {
    let [list, setList] = useState([])

    dayUpdate().then(
        content => {
            // console.log(content);
            let { code, data } = content;
            if (code == 200) {
                setList(data);
            }
        }
    )

    return (
        <div className='day'>
            <div className='top'>
                <div className='back' onClick={
                    () => {
                        window.history.back();
                    }
                }></div>
                <h2 className='top-title'>每日更新</h2>
            </div>
            <div className="bottom">
                {
                    list.map((item, i) => {
                        return (
                            <Link to={`/detail?id=${item.id}`}  key={i}>
                                <div className="box">
                                    <div className='box-top'>
                                        <h3 className='title'>{item.title}</h3>
                                        {
                                            item.tag.split(" ").map((itemm, j) => {
                                                return (
                                                    <div className='tag' key={j}>{itemm}</div>
                                                )
                                            })
                                        }
                                    </div>
                                    <p>作者：{item.author}</p>
                                    <img className='img' src={item.bigpic} alt="" />
                                    <div className='box-bottom'>
                                        <div className='b_left'>{item.lastchapter}</div>
                                        <div className='b_right'>
                                            <i></i><span>{item.num_comment}</span>
                                            <i></i><span>{item.num_love}</span>
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        )
                    })
                }
            </div>
        </div>
    )
}
